<template>
  <a-modal :title="title" :width="width" :visible="visible" @ok="handleOk" :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }" @cancel="handleCancel" cancelText="关闭">
    <!-- <div id="printContent" style="text-align: center;">
      <QrCode :value="QrCodeContent" />
      <a-button type="primary" style="width: 50%;" @click="jsonPrint">{{modalTitle}}</a-button>
    </div> -->
    
    <!-- <CollapseContainer :title="modalTitle" class="text-center qrcode-demo-item">
      <QrCode :value="QrCodeContent" :width="200" :options="{ margin: 5 }" ref="qrDiyRef" :logo="LogoImg" @done="onQrcodeDone" />
      <a-button class="mb-2" type="primary" @click="downloadDiy"> 下载 </a-button>
    </CollapseContainer> -->
    <CollapseContainer :title="modalTitle" class="text-center qrcode-demo-item">
        <QrCode id="printContent" ref="qrDiyRef" :value="QrCodeContent" :logo="LogoImg" @done="onQrcodeDone"/>
        <a-button class="mb-2" type="primary" @click="downloadDiy"> 下载 </a-button>
        <a-button type="primary" @click="jsonPrint" style="margin-left: 8px">打印</a-button>
      </CollapseContainer>
      <!-- <div class="msg"> (在线logo会导致图片跨域，需要下载图片需要自行解决跨域问题) </div> -->
  </a-modal>
</template>

<script lang="ts" setup>
  import { ref, defineExpose,unref } from 'vue';
  import { CollapseContainer } from '/@/components/Container/index';
  import { QrCode,QrCodeActionType } from '/@/components/Qrcode/index';
  import printJS from 'print-js';
  import LogoImg from '/@/assets/images/fengxian.png';
  
  const title = ref<string>('');
  const width = ref<number>(1200);
  const visible = ref<boolean>(false);
  const disableSubmit = ref<boolean>(false);
  const emit = defineEmits(['register', 'success']);
  const QrCodeContent = ref<string>('');
  const modalTitle = ref<string>('');
  const qrDiyRef = ref<Nullable<QrCodeActionType>>(null);
  
  /**
   * 二维码
   * @param record
   */
  function qrCodeModel(record) {
    title.value = '二维码';
    visible.value = true;
    QrCodeContent.value = record.id
    modalTitle.value = record.riskUnitName
  }
  function downloadDiy() {
    const qrEl = unref(qrDiyRef);
    if (!qrEl) return;
    qrEl.download('文件名');
  }
  function onQrcodeDone({ ctx }: any) {
    if (ctx instanceof CanvasRenderingContext2D) {
      // 额外绘制
      ctx.fillStyle = 'black';
      ctx.font = '16px "微软雅黑"';
      ctx.textBaseline = 'bottom';
      ctx.textAlign = 'center';
      ctx.fillText(modalTitle.value, 100, 195, 200);
    }
  }

  function jsonPrint() {
    printJS({
      printable: 'printContent',
      type: 'html',
    });
  }
  
  /**
   * 确定按钮点击事件
   */
  function handleOk() {
    visible.value = false;
  }

  /**
   * 取消按钮回调事件
   */
  function handleCancel() {
    visible.value = false;
  }

  defineExpose({
    qrCodeModel,
    downloadDiy,
    onQrcodeDone,
    jsonPrint,
    qrDiyRef,
    disableSubmit,
  });
</script>

<style>
  /**隐藏样式-modal确定按钮 */
  .jee-hidden {
    display: none !important;
  }
  .qrcode-demo-item {
    width: 100%;
    margin-right: 1%;
  }
</style>
